<template>
    <div>
        <div class="">
          <h2>本学部明星列表</h2>
            <el-table 
                :loading="listLoading"
                :data="list.slice((this.currentPage-1)*pagesize,currentPage*pagesize)"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
            >
                <el-table-column
                    align="center"
                    prop="starId"
                    label="明星编号"
                    width="150px"
                />

                <el-table-column
                    align="center"
                    prop="starUserName"
                    label="姓名"
                    width="200px"
                />

                <el-table-column
                    align="center"
                    prop="starUserPartName"
                    label="学部"
                    width="200px"
                />

                <el-table-column
                    align="center"
                    prop="starUserClassName"
                    label="班级"
                    width="200px"
                />

                <el-table-column
                    align="center"
                    prop="starStatus"
                    label="活动状态"
                    width="200px"
                >
                    <template slot-scope="scope">
                        <span v-if="scope.row.starStatus=='0'" >审核中</span>
                        <span v-if="scope.row.starStatus=='1'" >已公布</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="操作" >
                    <template slot-scope="Scope">
                        <el-button type="primary" icon="el-icon-search" @click="getStarInfo(Scope.row.starId)" size="mini">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div id="pages">
                <el-pagination
                    :current-page="currentPage"
                    :page-sizes="[10]"
                    :page-size="pagesize"
                    layout="total, sizes,prev, pager, next"
                    :total="list.length"
                    prev-text="上一页"
                    next-text="下一页"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>
        <star-info ref="info"  :starId='starId' :show='show'></star-info>
    </div>
</template>

<script>
import { getStarByStarPartId } from '../../api/star.js'
import Info from '../../components/star/info.vue'
export default {
    name: '',
    components: {
        'star-info': Info
    },
    data() {
        return {
            starId:'',
            show:false,
            dialogFormVisible:false,
            search:{},
            listLoading:false,
            list:[],
            currentPage: 1, // 默认显示页面为1
            pagesize: 10, //    每页的数据条数
            search:{}
        }
    },
    props:{
        type:String
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 每页下拉显示数据
        handleSizeChange (size) {
            this.pagesize = size
        },
          // 点击第几页
        handleCurrentChange(currentPage) {
            console.log(this)
            this.currentPage = currentPage
        },
        handleClick(row) {
            console.log(row)
        },
        getStarByStarPartId() {
            getStarByStarPartId().then((data)=>{
                this.list = data.obj
                this.listLoading = false
            })
        },
        getStarInfo(starId) {
            this.$refs.info.showInfo(starId)
        },
    },
    created() {
      this.getStarByStarPartId();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped>

</style>